"use client";
/*
 * @Author: hongbin
 * @Date: 2025-04-30 09:46:04
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-01 17:13:04
 * @Description:
 */
import { FC, useEffect, useRef, useState } from "react";
import { styled } from "styled-components";
import * as ECharts from "echarts";

interface IProps {
    data: number[];
}

/** 柱状图 */
const BarChart: FC<IProps> = ({ data = [39, 47, 40, 84, 35, 90, 71] }) => {
    const divRef = useRef<HTMLDivElement>(null);
    const ChartRef = useRef<ECharts.ECharts>(null);
    // const [data, setData] = useState([39, 47, 40, 84, 35, 90, 71]);

    useEffect(() => {
        if (divRef.current) {
            const chart = ECharts.init(divRef.current);

            ChartRef.current = chart;

            // const data = [39, 47, 40, 84, 35, 90, 71];
            const categories = ["A", "B", "C", "D", "E", "F", "G"];
            const offset = 5;
            // 最大值为100时 如下 增加 下方空隙 + 上方label
            // 决定背景边框和内容高度差 正常情况 数值label为最大值时在边框外部
            const maxBarValue = 100 + offset * 2 + 20;

            const fontSize = 12;

            const option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'none',
                    },
                    // formatter: "{b0}: {c0}<br />{b1}: {c1}<br />{b2}: {c2}",
                    formatter: "{b2}: {c2}",
                    // valueFormatter: (value: number | string, dataIndex: number) => {
                    //     console.log(value, dataIndex);
                    //     return "";
                    // },
                },
                xAxis: {
                    type: "category",
                    data: categories,
                    axisLine: { lineStyle: { color: "transparent" } },
                    axisLabel: {
                        color: "#ccc",
                        fontSize: fontSize,
                    },
                },
                yAxis: {
                    show: false,
                    max: maxBarValue + offset + 10,
                },
                grid: {
                    left: "5%",
                    right: "5%",
                    bottom: "12%",
                    top: "5%",
                },
                series: [
                    // 金色背景柱
                    {
                        type: "bar",
                        data: Array(data.length).fill(maxBarValue),
                        barWidth: "80%",
                        itemStyle: {
                            color: "#21131699",
                            borderColor: "#96CCCE",
                            borderWidth: 1,
                        },
                        z: 1,
                    },
                    // 占位透明柱（用于悬空红柱）
                    {
                        type: "bar",
                        data: Array(data.length).fill(offset),
                        stack: "data",
                        barWidth: "40%",
                        itemStyle: {
                            color: "transparent",
                        },

                        z: 2,
                    },
                    // 红色柱子（真实数据）
                    {
                        type: "bar",
                        animationDuration: 1500,
                        animationEasing: "elasticOut",
                        data: data,
                        stack: "data",
                        barGap: "-75%",
                        itemStyle: {
                            color: "#00fdfd",
                            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //     { offset: 0, color: "#00fdfd" },
                            //     { offset: 1, color: "#8A2F34" },
                            // ]),
                            shadowColor: "#00fdfd",
                            shadowBlur: 10,
                        },
                        label: {
                            show: true,
                            position: "top",
                            color: "#00fdfd",
                            fontWeight: "bold",
                            fontSize: fontSize,
                            formatter: "{c}",
                            fontFamily: "MyCustomFont",
                            fontStyle: "italic",
                            distance: fontSize,
                        },
                        z: 3,
                    },

                    // 顶部矩形块 用label替代
                    {
                        type: "bar",
                        stack: "data",
                        data: data.map(v => 0),
                        color: "transparent",
                        label: {
                            show: true, // 显示标签
                            position: "top", // 标签位置（如 top/inside/outside）
                            color: "#00fdfd", // 文字颜色（白色更醒目）
                            backgroundColor: "#00fdfd", // 背景颜色
                            borderRadius: fontSize / 7, // 边框圆角设为 0 实现矩形
                            // padding: [fontSize / 6, fontSize / 1.5], // 内边距调整矩形大小
                            padding: [0, fontSize / 1.5, -fontSize / 6, fontSize / 1.5], // 内边距调整矩形大小
                            formatter: "", // 显示数据值（{c} 代表数据值）
                            shadowColor: "#00fdfd",
                            shadowBlur: fontSize / 2,
                            align: "center",
                        },
                        z: 4,
                    },
                ],
            };

            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        }
    }, []);

    useEffect(() => {
        if (ChartRef.current) {
            console.log("更新data", data);
            ChartRef.current.setOption({
                series: [
                    {},
                    {},
                    {
                        data,
                    },
                ],
            });
        }
    }, [data]);

    return <ChartWarp ref={divRef}></ChartWarp>;
};

export default BarChart;

const ChartWarp = styled.div`
    width: 300px;
    height: 200px;
`;
